<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Text Rotation</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1000px;height:600px;"></div>
    <script type="text/javascript">
        // 初始化qrenderer
        var qr = QuarkRenderer.init(document.getElementById('main'));
        var text1 = new QuarkRenderer.Text({
            style: {
                text: 'aaaaaa',
                fontSize:32
            },
            position: [200, 200]
        });
        var text2 = new QuarkRenderer.Text({
            style: {
                text: 'aaaaaa',
                fontSize:32
            },
            position: [300, 200]
        });

        var ap=text1.animate()
        .when(2000,{
            rotation: Math.PI
        })
        .start();

        // test animation puase/resume process
        setTimeout(() => {
            ap.pause();
        }, 800);
        setTimeout(() => {
            ap.resume();
        }, 1500);

        text2.animate()
        .when(2000,{
            rotation:-Math.PI
        })
        .start();
        
        qr.add(text1);
        qr.add(text2);
    </script>
</body>
</html>